﻿<!doctype html>
<html class="no-js">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

  <title>萌宠之家-C2B2C社会化电商平台->运营后台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="../statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="../statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="../statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="../statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/admin.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/app.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="../statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->
  <script src="../statics/AmazeUI/assets/js/amazeui.min.js"></script>
  <script src="../statics/AmazeUI/assets/js/amazeui.modal.js"></script>
  <!-- 百度编辑器 -->
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.all.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript">
      var ue = UE.getEditor('editor',{
              initialFrameWidth:"100%" //初始化选项
              //scaleEnabled:true//scaleEnabled {Boolean} [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)
          }
      );
  </script>

  <script src="../statics/AmazeUI/assets/js/validator.js"></script>
  <script src="../statics/js/plugin/jquery.livequery.js"></script>
  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="../statics/js/plugin/jquery.form.js"></script>
  <script>
      $().ready( function() {
          AMUI.plugin('mySelected', AMUI.selected);
          $('[data-am-selected]').mySelected({btnWidth: '100%', maxHeight: '200px', btnSize: 'sm', btnStyle: 'secondary'});
      });
  </script>

  <script src="../statics/js/plugin/jquery.metadata.js"></script>
  <script src="../statics/js/base.js"></script>
  <script src="../statics/js/jquery.lSelect.js"></script>
  <!-- 公共head End -->
</head>
<body>
<!-- content start -->
<div class="admin-content">
  <div class="admin-content-body">
    <div class="am-cf app-padding-title">
      <div class="am-fl am-cf">
        <strong class="am-text-primary am-text-lg">商品管理</strong> / <small>商品信息</small>
      </div>
    </div>

    <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
    
    <form id="addForm" class="validator-form" callback="addFormAjaxSubmit()" action="http://localhost:8080/product/add" method="post">
    <input type="hidden" id="id" name="id" value="" />
    <input type="hidden" id="token" name="token" value="" />
    <div class="am-tabs am-margin" data-am-tabs="{noSwipe: 1}" id="doc-my-tabs">
      <ul class="am-tabs-nav am-nav am-nav-tabs">
        <li class="am-active"><a href="#tab1">基本信息</a></li>
        <li><a href="#tab2">商品图片</a></li>
        <li><a href="#tab3">商品描述</a></li>
      </ul>

      <div class="am-tabs-bd am-form am-tabs-bd-ofv">
        <div class="am-tab-panel am-fade am-in am-active am-form-horizontal" id="tab1">
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-4 am-u-md-3 am-text-right am-form-label">商品名称</label>
            <div class="am-u-sm-8 am-u-md-9">
              <input type="text" class="am-form-field" id="name" name="name" value="" required />
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-4 am-u-md-3 am-text-right am-form-label">商品分类</label>
            <div class="am-u-sm-8 am-u-md-9">
              <select id="categoryId" name="categoryId" data-am-selected="{btnWidth: '100%', maxHeight: '200px', btnSize: 'sm'}" required>
                <option value="0">-- 请选择 --</option>
              </select>
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-4 am-u-md-3 am-text-right am-form-label">售价</label>
            <div class="am-u-sm-8 am-u-md-9">
              <input id="price" type="number" class="am-form-field" name="price" value="" min="0" required />
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-4 am-u-md-3 am-text-right am-form-label">库存量</label>
            <div class="am-u-sm-8 am-u-md-9">
              <input type="number" class="am-form-field" id="stock" name="stock" value="" placeholder="只允许输入正整数" min="0" />
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-4 am-u-md-3 am-text-right am-form-label">精品推荐</label>
            <div class="am-u-sm-8 am-u-md-9">
              <label class="am-radio-inline">
                <input type="radio" id="recommend" name="recommend" value="true" required> 是
              </label>
              <label class="am-radio-inline">
                <input type="radio" name="recommend" value="false" checked="true"> 否
              </label>
            </div>
          </div>
        </div>

        <div class="am-tab-panel am-fade app-min-height app-product-image" id="tab2">
          <ul class="am-avg-sm-2 am-avg-md-4 am-thumbnails" id="file-list"></ul>
        </div>

        <div class="am-tab-panel am-fade" id="tab3">
          <div>
            <script id="editor" type="text/plain"></script>
          </div>
        </div>

      </div>
    </div>
    <div class="am-margin">
      <input type="hidden" id="subImage" name="subImage" value="" />
      <input type="hidden" id="detail" name="detail" value="" />
      <button id="btnSubmit" type="submit" class="am-btn am-btn-primary"> 保  存 </button>
      <button type="button" class="am-btn am-btn-default" onclick="window.history.back(); return false;"> 返  回 </button>
    </div>
    </form>
  </div>
</div>
<!-- content end -->
<script>

    // 商品分类列表
    let categoryList = new Array();

    // 商品上传组件索引
    let productFileIndex = 0;

    let jsonUser;
    let token;

    // 商品id
    let productId = GetQueryString('id');

  $().ready(function() {

      // 判断用户信息和token是否存在
      jsonUser = sessionStorage.getItem("admin");
      token = sessionStorage.getItem("token");

      if(!jsonUser || !token) {
          top.location.href = 'admin_login.html';
          return;
      }

      // 判断当前页面是否在框架页中，如果不存在，就跳转到后台中心页面
      if(self.location == top.location)
          location.href='admin_center.html';

      // 设置token
      $('#token').val(token);

    // 商品图片左移
    $(".opr-img-left").livequery("click", function() {
        var $productImageLi = $(this).parent().parent().parent().parent();
        var $productImagePrevLi = $productImageLi.prev("li");
        if ($productImagePrevLi.length > 0) {
            $productImagePrevLi.insertAfter($productImageLi);
        }
    });

    // 商品图片右移
    $(".opr-img-right").livequery("click", function() {
        var $productImageLi = $(this).parent().parent().parent().parent();
        var $productImageNextLi = $productImageLi.next("li");

        // 商品图片数量
        let productImageNum = $('#file-list input[name="productImageName"]').length;
        // 如果下一个图片组的索引下标小于图片总数量，就可以进行图片移动
        if ( $productImageNextLi.index() < productImageNum) {
            $productImageNextLi.insertBefore($productImageLi);
        }
    });

    // 商品图片删除
    $(".opr-img-delete").livequery("click", function() {
        var $productImageLi = $(this).parent().parent().parent().parent();
        $productImageLi.remove();

        // 商品图片数量
        let productImageNum = $('#file-list input[name="productImageName"]').length;

        // 如果商品图片数量等于7（差1张就满了）
        if( productImageNum == 7 ){
            // 增加1个图片上传组件
            // 要添加的图片组HTML
            var productImageLiHtmlTemp = '<li><div class="am-thumbnail">'
                + '<div class="app-product-image-preview am-text-center am-text-warning">暂无图片</div>'
                + '<ul class="am-thumbnail-caption am-avg-sm-3">'
                + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-left" disabled="disabled"><span class="am-icon-chevron-left"></span></button></li>'
                + '<li><button type="button" class="am-btn am-btn-default am-text-danger am-btn-xs am-center opr-img-delete" disabled="disabled"><span class="am-icon-trash"></span></button></li>'
                + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-right" disabled="disabled"><span class="am-icon-chevron-right"></span></button></li>'
                + '</ul><hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" /><ul class="am-thumbnail-caption am-avg-sm-1">'
                + '<li><div class="am-form-group am-form-file"><button type="button" class="am-btn am-btn-default am-btn-xs am-center"><i class="am-icon-cloud-upload"></i> 上传图片</button><input class="doc-form-file" name="productImages" type="file"></div></li>';
            + '</ul></div></li>';

            // 添加商品图片组
            let productImageLiHtml = productImageLiHtmlTemp;
            productImageLiHtml = productImageLiHtml.replace("productImages", "productImages" + productFileIndex);
            $('#file-list').append(productImageLiHtml);

        }// if( productImageNum == 7 );
    });

    // 添加图片
    var productImageLiHtmlTemp = '<li><div class="am-thumbnail">'
        + '<div class="app-product-image-preview am-text-center am-text-warning">暂无图片</div>'
        + '<ul class="am-thumbnail-caption am-avg-sm-3">'
        + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-left" disabled="disabled"><span class="am-icon-chevron-left"></span></button></li>'
        + '<li><button type="button" class="am-btn am-btn-default am-text-danger am-btn-xs am-center opr-img-delete" disabled="disabled"><span class="am-icon-trash"></span></button></li>'
        + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-right" disabled="disabled"><span class="am-icon-chevron-right"></span></button></li>'
        + '</ul><hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" /><ul class="am-thumbnail-caption am-avg-sm-1">'
        + '<li><div class="am-form-group am-form-file"><button type="button" class="am-btn am-btn-default am-btn-xs am-center"><i class="am-icon-cloud-upload"></i> 上传图片</button><input class="doc-form-file" name="productImages" type="file"></div></li>';
        + '</ul></div></li>';

    // 商品图片发生变化的事件
    $("input.doc-form-file").livequery('change', function() {

      var $this = $(this);
      var $productImageLi = $this.parent().parent().parent().parent();
      var $productImagePreview = $productImageLi.find(".app-product-image-preview");
      // '左移动'按钮
      var $productImageLeftBtn = $productImageLi.find(".opr-img-left");
      // '右移动'按钮
      var $productImageRightBtn = $productImageLi.find(".opr-img-right");
      // 删除按钮
      var $productImageDeteleBtn = $productImageLi.find(".opr-img-delete");

      var fileName = $this.val().substr($this.val().lastIndexOf("\\") + 1);

      if (/png|jpg|jpeg/i.test($this.val()) == false) {
        $.message("您选择的文件格式错误！");
        return false;
      }

      // 进行文件上传
      let formData = new FormData();
      formData.append("file", $this[0].files[0]);
      formData.append("token", token);

      $.ajax({
          url: 'http://localhost:8080/product/upload',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          success: function ( result ) {

              // 如果返回的是token失效，就重新登录
              if(result.code == 419) {

                  Modal.confirm('当前会话token失效，请重新登录页面！', {
                      closeViaDimmer: false,
                      onConfirm: function() {
                          top.location.href = 'admin_login.html';
                      },
                      onCancel: function() {
                          top.location.href = 'admin_login.html';
                      }
                  });// Modal.confirm();

                  return;
              }// if(result.code == 419);

              // 如果返回的数据的响应码不是'成功(200)'
              if(result.code != 200) {
                  Modal.alert(result.msg);
                  return;
              }

              // 如果返回的数据响应码为200
              // 创建新的文件上传标签组
              $productImagePreview.html('<img src="' + window.URL.createObjectURL($this[0].files[0]) + '" class="am-img-bdrs" >');
              $productImagePreview.append('<input type="hidden" name="productImageName" value="' + result.data + '" />');

              // 商品图片数量
              let productImageNum = $('#file-list input[name="productImageName"]').length;

              // 如果上传满了8张，最后1个图片组的按钮，可以点击
              if( productImageNum >= 8 ) {
                  $productImageDeteleBtn.attr('disabled',false);
                  $productImageLeftBtn.attr('disabled',false);
                  $productImageRightBtn.attr('disabled',false);
                  return;
              }

              // 激活'删除'按钮,最多允许上传8张图片
              if(productImageNum < 8 && $productImageDeteleBtn.attr('disabled')){

                  productFileIndex++;
                  $productImageDeteleBtn.attr('disabled',false);
                  $productImageLeftBtn.attr('disabled',false);
                  $productImageRightBtn.attr('disabled',false);
                  var productImageLiHtml = productImageLiHtmlTemp;
                  productImageLiHtml = productImageLiHtml.replace("productImages", "productImages"+productFileIndex);
                  $('#file-list').append(productImageLiHtml);

              }// if($productImageDeteleBtn.attr('disabled'));

          }// success();
      });// $.ajax();

    });// $("input.doc-form-file").livequery('change');

    // 设置tab标签栏的样式
    $('#doc-my-tabs').find('a').on('opened.tabs.amui', function(e) {
      $('div.am-tab-panel').removeAttr("style");
    });

    // 初始化图片列表
    initProductImageList();

    // 加载'商品分类'列表数据
    loadCategoryList();

    // 查看是否存在商品id
    if( productId ) {
        // 如果存在商品id，就加载商品信息
        loadProductInfo();
    }

  });// $().ready(function());

/** 初始化图片列表 **/
function initProductImageList() {

    // 清空原图片列表元素
    $('#file-list').empty();

    // 图片文件框下标
    let index = 0;

    // 要添加的图片组HTML
    var productImageLiHtmlTemp = '<li><div class="am-thumbnail">'
        + '<div class="app-product-image-preview am-text-center am-text-warning">暂无图片</div>'
        + '<ul class="am-thumbnail-caption am-avg-sm-3">'
        + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-left" disabled="disabled"><span class="am-icon-chevron-left"></span></button></li>'
        + '<li><button type="button" class="am-btn am-btn-default am-text-danger am-btn-xs am-center opr-img-delete" disabled="disabled"><span class="am-icon-trash"></span></button></li>'
        + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-right" disabled="disabled"><span class="am-icon-chevron-right"></span></button></li>'
        + '</ul><hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" /><ul class="am-thumbnail-caption am-avg-sm-1">'
        + '<li><div class="am-form-group am-form-file"><button type="button" class="am-btn am-btn-default am-btn-xs am-center"><i class="am-icon-cloud-upload"></i> 上传图片</button><input class="doc-form-file" name="productImages" type="file"></div></li>';
    + '</ul></div></li>';

    // 添加商品图片组
    let productImageLiHtml = productImageLiHtmlTemp;
    productImageLiHtml = productImageLiHtml.replace("productImages", "productImages"+index);
    $('#file-list').append(productImageLiHtml);

}// initProductImageList();


/** '保存表单' Ajax提交 **/
function addFormAjaxSubmit(){

    // 因为跨域同源问题，所以先移除form下面的file标签
    $("#addForm input[type='file']").remove();

    // 商品图片列表
    let imageUrl = '';

    // 获取所有商品图片的文件名(在hidden表单域中)
    $('#file-list input[name="productImageName"]').each(function (i) {

        // 拼接商品图片名称列表
        imageUrl += $(this).val() + ',';

    });// $('#file-list [name="productImage"]').each();

    // 去除最后1个','逗号
    imageUrl = imageUrl.substring(0, imageUrl.length - 1);

    // 将所有商品图片列表的文件名，放入subImage隐藏表单域中
    $('#subImage').val(imageUrl);

    // 获取富文本框中的内容
    // 商品详情
    let productDetail = UE.getEditor('editor').getContent();
    $("#detail").val(productDetail);


    // '保存表单'提交
    $("#addForm").ajaxSubmit({
        success:function(result){
            // 如果返回的是token失效，就重新登录
            if(result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'admin_login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'admin_login.html';
                    }
                });// Modal.confirm();

                return;
            }// if(result.code == 419);

            // 如果返回的数据的响应码不是'成功(200)'
            if(result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            Modal.confirm('商品信息保存成功！', {
                closeViaDimmer: false,
                onConfirm: function() {
                    location.href = 'product_list.html';
                },
                onCancel: function() {
                    location.href = 'product_list.html';
                }
            });// Modal.confirm();

        }// success(result);
    });// $("#addForm").ajaxForm();

}// addFormAjaxSubmit();

/** 根据商品id，查找商品信息 **/
function loadProductInfo(){

    // 加载'商品信息'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/product/get',
        async: false,
        data: {id:productId},
        success: function (result) {

            // 如果返回的是token失效，就重新登录
            if (result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'admin_login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'admin_login.html';
                    }
                });// Modal.confirm();

                return;
            }
            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 填充商品信息数据
            fillProductInfo(result.data);
        }

    });// $.ajax();

}// loadProductInfo();

/** 填充商品信息 **/
function fillProductInfo( product ) {

    // 设置表单提交url
    $('#addForm').attr('action', 'http://localhost:8080/product/update');

    // id
    $('#id').val(product.id);
    // token
    $('#token').val(token);
    // 商品名称
    $('#name').val(product.name);
    // 分类id
    $('#categoryId').val(product.categoryId);
    // 售价
    $('#price').val(product.price);
    // 库存量
    $('#stock').val(product.stock);
    // 是否精品推荐
    $("input:radio[name='recommend'][value='" + product.recommend + "']").attr('checked',true);

    // 填充商品图片
    fillProductImageList( product.subImage );

    // 商品描述
    ue.ready(function () {

        ue.setContent(product.detail, false);

    });//ue.ready(function ());

}// fillProductInfo( product );

/** 填充商品图片 **/
function fillProductImageList( subImage ) {

    // 清空原图片列表元素
    $('#file-list').empty();

    // 商品图片列表
    let subImageList = subImage.split(',');

    // 图片下标索引
    let index = 0;

    // 填充商品图片
    while( index < subImageList.length ) {

        let productImgUrl = subImageList[index];

        // 要添加的图片组HTML
        let productImageLiHtml = '<li><div class="am-thumbnail">'
            + '<img src="' + IMAGE_URL_CONST.PRODUCT + productImgUrl +  '" class="am-img-bdrs">'
            + '<input type="hidden" name="productImageName" value="' + productImgUrl + '" />'
            + '<ul class="am-thumbnail-caption am-avg-sm-3">'
            + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-left"><span class="am-icon-chevron-left"></span></button></li>'
            + '<li><button type="button" class="am-btn am-btn-default am-text-danger am-btn-xs am-center opr-img-delete"><span class="am-icon-trash"></span></button></li>'
            + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-right"><span class="am-icon-chevron-right"></span></button></li>'
            + '</ul><hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" /><ul class="am-thumbnail-caption am-avg-sm-1">'
            + '<li><div class="am-form-group am-form-file"><button type="button" class="am-btn am-btn-success am-btn-xs am-center" disabled="disabled"><i class="am-icon-info-circle"></i> 已经上传</button></div></li>';
        + '</ul></div></li>';

        // 添加商品图片组
        $('#file-list').append(productImageLiHtml);

        index++;

    }// while( index < subImageList.length);

    // 最多上传8张图片
    if( index >= 8) return;

    // 如果没有上传满，就添加1个图片上传HTML组件
    // 要添加的图片组HTML
    let productImageUploadLiHtmlTemp = '<li><div class="am-thumbnail">'
        + '<div class="app-product-image-preview am-text-center am-text-warning">暂无图片</div>'
        + '<ul class="am-thumbnail-caption am-avg-sm-3">'
        + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-left" disabled="disabled"><span class="am-icon-chevron-left"></span></button></li>'
        + '<li><button type="button" class="am-btn am-btn-default am-text-danger am-btn-xs am-center opr-img-delete" disabled="disabled"><span class="am-icon-trash"></span></button></li>'
        + '<li><button type="button" class="am-btn am-btn-default am-text-warning am-btn-xs am-center opr-img-right" disabled="disabled"><span class="am-icon-chevron-right"></span></button></li>'
        + '</ul><hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" /><ul class="am-thumbnail-caption am-avg-sm-1">'
        + '<li><div class="am-form-group am-form-file"><button type="button" class="am-btn am-btn-default am-btn-xs am-center"><i class="am-icon-cloud-upload"></i> 上传图片</button><input class="doc-form-file" name="productImages" type="file"></div></li>';
    + '</ul></div></li>';

    // 添加商品图片上传组件
    let productImageUploadLiHtml = productImageUploadLiHtmlTemp.replace("productImages", "productImages"+index);
    $('#file-list').append(productImageUploadLiHtml);

}// fillProductImageList( subImageList );

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            categoryList = result.data;

            // 填充表格数据
            fillCategoryList();
        }// success();

    });// $.post();

}// loadCategoryList();

/** 填充表格数据 **/
function fillCategoryList( ) {

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，不等于0，就跳过本次循环
        if( category.parentId != 0 ) continue;

        // 就将数据字典项添加到<select>下拉框中
        let optItem = '<option value="0">'+ category.name +'</option>';
        $('#categoryId').append(optItem);

        // 填充子分类列表
        fillChildrenCategoryList(category.id);

    }// for();

}// fillCategoryList();

/** 根据父分类id，填充子分类列表 **/
function fillChildrenCategoryList( parentId ) {

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，不等于传入的分类id，就跳过本次循环
        if( category.parentId != parentId ) continue;

        // 就将数据字典项添加到<select>下拉框中
        let optItem = '<option value="' + category.id + '">&nbsp;--&nbsp;'+ category.name +'</option>';
        $('#categoryId').append(optItem);

    }// for();

}// fillChildrenCategoryList( parentId );
</script>
</body>
</html>